import React, { PureComponent, Fragment } from 'react';

import { Table,Icon,Popconfirm,Divider,message} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import EditForm from './PipingRoadAddForm'
import styles from '../../Repair.less';

@connect()
export default class PipingRoadTable extends PureComponent {
    returnColumn = () => {

        return [
            {
                title: '序号',
                dataIndex: 'index',
                render: (text, record, index) => `${index + 1}`,
                width: 50,

            },
            {
                title: '年月',
                dataIndex: 'yf',
                key: 'yf',
                width: 80,
                render: (text, record, index) =>{
                    if(record.yf == '合计') return '合计' 
                    else  return record.nf + '-' + record.yf
                } 
              },
            {
                title: '所在道路',
                dataIndex: 'szdl',
                width: 100,

            },
            {
                title: '下水道养护方式',
                children: [
                    {
                        title: '管理疏通（m）',
                        dataIndex: 'gdst',
                        width: 50,
                    },
                    {
                        title: '清理淤泥（桶）',
                        dataIndex: 'qlyn',
                        width: 50,
                    }
                    ,
                    {
                        title: '疏通管道规格',
                        children: [
                            {
                                title:'Φ  110（m）',
                                dataIndex: 'stgdgg110',
                                width: 50,
                            },
                            {
                                title:'Φ  225（m）',
                                dataIndex: 'stgdgg225',
                                width: 50,
                            },
                            {
                                title:'Φ  300（m）',
                                dataIndex: 'stgdgg300',
                                width: 50,
                            },
                            {
                                title:'Φ  400（m）',
                                dataIndex: 'stgdgg400',
                                width: 50,
                            },
                            {
                                title:'Φ  450（m）',
                                dataIndex: 'stgdgg450',
                                width: 50,
                            },
                            {
                                title:'Φ  600（m）',
                                dataIndex: 'stgdgg600',
                                width: 50,
                            },
                            {
                                title:'Φ  800（m）',
                                dataIndex: 'stgdgg800',
                                width: 50,
                            },
                            {
                                title:'Φ  1000（m）',
                                dataIndex: 'stgdgg1000',
                                width: 50,
                            },
                            {
                                title:'Φ  1200（m）',
                                dataIndex: 'stgdgg1200',
                                width: 50,
                            },
                            {
                                title:'Φ  1350（m）',
                                dataIndex: 'stgdgg1350',
                                width: 50,
                            },
                            {
                                title:'Φ  1500（m）',
                                dataIndex: 'stgdgg1500',
                                width: 50,
                            },
                            {
                                title:'Φ  1800（m）',
                                dataIndex: 'stgdgg1800',
                                width: 50,
                            }
                        ]
                    }
                ]
            },
            {
                title: '操作',
                key: 'action',
                width: 100,
                render: (text, record) => {
                  if (record.sfth == '2'){
                    // 2打回来
                    return(
                      <span>
                        <a href="javascrips:;" onClick={this.handleEdit.bind(this, record)} title="编辑">
                          <Icon type="edit" />编辑
                        </a>
                        <Divider type="vertical" />
                        <Popconfirm
                          title="确定删除?"
                          onConfirm={this.handleDelete.bind(this, record)}
                          title="删除"
                        >
                          <a href="javascript:;">
                            <Icon type="delete" />删除
                          </a>
                        </Popconfirm>
                      </span>
                    );
                  }
                  else if(record.sfth == '1'){
                    return  <span>
                    <a href="javascrips:;" onClick={this.handleRevert.bind(this, record)} title="回退">
                      <Icon type="rollback" />
                    </a>
                  </span>
                  }
                },
              },

        ];
    }
    handleRevert=(record)=>{
        const hide = message.loading('正在回退...', 0);
        this.props.dispatch({
            type: 'pipingRoad/fetchSewerEditRollback',
            payload: {
                id: record.id,
            },
            callback: response => {
                hide();
                if (response.status) {
                    message.success('回退成功');
                    this.props.fetchList();
                } else {
                    message.error('回退失败');
                    console.log(response.ErrorMessage);
                }
            },
        });
    }
    handleDelete=(record)=>{
        
        const hide = message.loading('正在删除...', 0);
        this.props.dispatch({
            type: 'pipingRoad/fetchSewerDelteleData',
            payload: {
                id: record.id,
            },
            callback: response => {
                hide();
                if (response.status) {
                    message.success('删除成功');
                    this.props.fetchList();
                } else {
                    message.error('删除失败');
                    console.log(response.ErrorMessage);
                }
            },
        });
    }
    handleEdit=(record)=>{
        this["AddForm"].setState({ visible: true },()=>{
            setTimeout( this["AddForm"].setFormValues({values:record}),4000);
           
        });
    }
    OnRef=({ref=null,type=null}={})=>{

        if(ref&&type)this[type] = ref;
    
      }
    render() {
        const { loading, dataSource } = this.props;
        return (
            <>
            <Table
                className={styles.RepairTable}
                size="small"
                align={'center'}
                bordered
                loading={loading}
                dataSource={dataSource}
                columns={this.returnColumn()}
            />
            <EditForm OnRef={this.OnRef} fetchList={this.props.fetchList}/>
            </>
        )
    }

}